<template>
  <div class="app-container home">
    <div class="banner"></div>
    <div class="container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/gateway' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{activeName?activeName:'文章列表'}}</el-breadcrumb-item>
      </el-breadcrumb>
<!--      <el-tabs-->
<!--        v-if="noticeSubTypes.length > 0"-->
<!--        v-model="activeName"-->
<!--        @tab-click="handleTabClick"-->
<!--        class="list-page__tabs"-->
<!--        type="card"-->
<!--      >-->
<!--        <el-tab-pane v-for="tab in noticeSubTypes" :key="tab.itemId" :label="tab.itemLabel" :name="tab.itemLabel"></el-tab-pane>-->
<!--      </el-tabs>-->
      <div class="list-content">
<!--        <div class="articles-list" v-if="noticeSubTypes.length === 0">-->
        <div class="articles-list">
          <div v-for="article in articles" :key="article.id" class="article-item" @click="handleToDetails(article)">
            <div class="article-content">
              <div class="article-details">
                <h3 class="article-title">
                  <a>{{ article.noticeTitle }}</a>
                </h3>
              </div>
              <div class="article-views">
                <span>{{ article.createTime.split(' ')[0] }}</span>
              </div>
            </div>
          </div>
      </div>
<!--        <div class="articles-list render-list" v-else>-->
<!--          <div v-for="article in renderList" :key="article.id" class="article-item" @click="handleToDetails(article)">-->
<!--            <div class="article-content">-->
<!--              <div class="article-details">-->
<!--                <h3 class="article-title">-->
<!--                  <a>{{ article.noticeTitle }}</a>-->
<!--                </h3>-->
<!--              </div>-->
<!--              <div class="article-views">-->
<!--                <span>{{ article.createTime.split(' ')[0] }}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

        <pagination
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="handlePagination"
          style="justify-content: center;background: transparent"
        />
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import { listNotice,listSubTypeByNoticeType,listNoticeWithSubType } from '@/api/system/notice'
import { getDicts } from '@/api/system/dict/data'

export default {
    name: 'GatewayList',
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          noticeType: null,
          sortField: 'createTime',
          sortOrder: 'desc',
          noticeSubTypes: undefined
        },
        total:0,
        levelList: [],
        dictId: '',
        articles: [],
        noticeSubTypes: [],
        noticeType: [],
        activeName: '',
        renderList: []
      }
    },
    created() {

      const noticeType = this.$route.query && this.$route.query.noticeType
      const urLNoticeSubType = this.$route.query && this.$route.query.noticeSubType

      this.queryParams.noticeType = noticeType

      getDicts('sys_notice_type').then(response => {
        const _that = this
        this.noticeType = response.data
        const noticeTypeCode = this.noticeType.find(item => item.dictValue === noticeType).dictCode
        listSubTypeByNoticeType(noticeTypeCode).then(res => {
          const noticeSubTypes = res.data
          this.noticeSubTypes = noticeSubTypes
          if (noticeSubTypes.length > 0  // 有子类，且点的子类进来，才触发
          && urLNoticeSubType)  {

            const targetType = noticeSubTypes.find(item => item.itemId.toString() === urLNoticeSubType)

            this.activeName = targetType.itemLabel

            const noticeSubType = targetType.itemId
            const query = {
              pageNum: 1,
              pageSize: 10,
              noticeTitle: undefined,
              createBy: undefined,
              status: undefined,
              sortField: 'createTime',
              sortOrder: 'desc',
              noticeSubType
            }

            _that.queryParams = query

            listNoticeWithSubType(query).then(res => {
              // _that.renderList = res.rows
              _that.articles = res.rows
              _that.total = res.total
            })

          } else {
            this.getNoticeByType()
          }
        })
      })

      //this.getNoticeByType()
    },
    mounted() {
      // 创建监听器并获取取消函数
      // 客户
      // const unwatch = this.$watch('noticeSubTypes', (newVal, oldVal) => {
      //   if (newVal.length > 0)  {
      //     this.activeName = newVal[0].itemLabel
      //
      //     const noticeSubType = newVal[0].itemId
      //     const query = {
      //       pageNum: 1,
      //       pageSize: 10,
      //       noticeTitle: undefined,
      //       createBy: undefined,
      //       status: undefined,
      //       sortField: 'createTime',
      //       sortOrder: 'desc',
      //       noticeSubType
      //     }
      //
      //     this.queryParams = query
      //
      //     listNoticeWithSubType(query).then(res => {
      //       this.renderList = res.rows
      //       this.total = res.total
      //     })
      //
      //   } else {
      //     this.getNoticeByType()
      //   }
      //   // 执行完后立即取消监听
      //   unwatch()
      // })
    },
    methods: {
      handlePagination({page, limit}) {
        // getNoticeByType
        this.queryParams = {
          ...this.queryParams,
          pageNum: page,
          pageSize: limit
        }
        if (this.noticeSubTypes.length > 0 ) {
          listNoticeWithSubType(this.queryParams).then(res => {
            // this.renderList = res.rows
            this.articles = res.rows
            this.total = res.total
          })
        } else {
          this.getNoticeByType()
        }
      },
      handleTabClick(tab,event){
        const {index} = tab
        const type = this.noticeSubTypes[index]
        const noticeSubType = type.itemId
        const query = {
          pageNum: 1,
          pageSize: 10,
          noticeTitle: undefined,
          createBy: undefined,
          status: undefined,
          sortField: 'createTime',
          sortOrder: 'desc',
          noticeSubType
        }

        this.queryParams = query

        listNoticeWithSubType(query).then(res => {
          this.renderList = res.rows
          this.total = res.total
        })
      },
      getNoticeByType() {
        this.loading = true
        listNotice(this.queryParams).then(response => {
          this.articles = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      handleToDetails(article) {
        const noticeId = article.noticeId
        this.$router.push({
          path: '/gateway-details',
          query: {
            noticeId: noticeId,
          }
        })
      }
    },
  }
</script>

<style lang="scss">
.list-page__tabs {
  margin: 15px 0 0 10px;


  & > .el-tabs__header .el-tabs__nav {
    border: 1px solid #afdd56;
  }

  .el-tabs__item {

    padding: 0 10px;
    font-size: 16px;

    &.is-active,
    &:hover {
      color: #afdd56;
      border-bottom-color: #afdd56 !important;
    }

  }

  .el-tabs__header {
    margin:  0;
  }



  .el-tabs__active-bar {
    background: #afdd56;
  }
}
</style>

<style scoped lang="scss">
.container {
  padding: 0 20px;
}

.list-content {
  min-height: 600px;
}

.articles-list {


      &.render-list {
        margin-top: 10px;
      }
      margin-top: 20px;
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      padding: 24px;
    }

    .article-item {
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
      transition: all 0.2s ease;
      border-radius: 8px;
    }

    .article-item:last-child {
      border-bottom: none;
    }

    .article-item:hover {
      background-color: #f8f9fa;
    }

    .article-content {
      display: flex;
      align-items: flex-start;
    }

    .article-icon {
      width: 32px;
      height: 32px;
      background-color: rgba(254, 121, 32, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .article-icon i {
      color: #fe7920;
    }

    .article-details {
      flex-grow: 1;
      align-self: center;
    }

    .article-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      transition: color 0.2s ease;
    }

    .article-title:hover {
      color: #afdd56;
      transform: translateX(4px);
    }

    .article-meta {
      display: flex;
      align-items: center;
      margin-top: 4px;
      font-size: 12px;
      color: #666;
    }

    .article-meta span {
      margin-right: 16px;
      display: flex;
      align-items: center;
    }

    .article-meta i {
      margin-right: 4px;
    }

    .article-views {
      margin-left: 16px;
      flex-shrink: 0;
    }

    .article-views span {
      background-color: rgba(175, 121, 86, 0.1);
      color: #a3d249;
      padding: 2px 8px;
      border-radius: 16px;
      font-size: 12px;
    }

    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 32px;
    }

    .pagination-nav {
      display: inline-flex;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .pagination-item {
      padding: 8px 16px;
      border: 1px solid #e2e8f0;
      background-color: white;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .pagination-item:first-child {
      border-radius: 8px 0 0 8px;
    }

    .pagination-item:last-child {
      border-radius: 0 8px 8px 0;
    }

    .pagination-item:not(.active):hover {
      background-color: #f8f9fa;
      cursor: pointer;
    }

    .pagination-item.active {
      background-color: #fe7920;
      color: white;
      border-color: #fe7920;
    }

</style>
